<template>
	<div class="flex-center">
		<n-popover class="edit-history-popover" :show-arrow="false" size="small" trigger="click" placement="top-start">
			<template #trigger>
				<n-button class="mr-10" secondary size="small" :disabled="options.length === 0">
					<span class="btn-text">历史记录</span>
				</n-button>
			</template>
			<div class="history-list-box">
				<n-scrollbar style="max-height: 500px">
					<div
						class="list-item ellipsis flex s-center"
						v-for="(item, i) in options"
						:key="i"
						:title="item.label"
						@click="$store.chart.setBackList(i)"
					>
						<n-icon class="item-icon" size="16" :depth="2">
							<component :is="item.icon" />
						</n-icon>
						<n-text depth="2">{{ item.label }}</n-text>
					</div>
				</n-scrollbar>
			</div>
		</n-popover>

		<n-tooltip trigger="hover">
			<template #trigger>
				<n-icon size="21" :depth="3">
					<QuestionFilled></QuestionFilled>
				</n-icon>
			</template>
			<span>最多只保留{{ $store.chart.editHistoryMax }}条记录</span>
		</n-tooltip>
	</div>
</template>

<script setup>
import reverse from 'lodash/reverse';

// 设置类型对应图标及label
function iconHandle(e) {
	// 画布编辑
	if (e.targetType === 'canvas') return { label: '画布初始化', icon: 'DesktopOutline' };
	// 操作类型
	switch (e.actionType) {
		case 'update':
			return { label: `更新 - ${e.historyData[0].title}`, icon: 'Pencil' };
		case 'delete':
			return { label: `删除 - ${e.historyData[0].title}`, icon: 'Trash' };
		case 'paste':
			return { label: `粘贴 - ${e.historyData[0].title}`, icon: 'Copy' };
		case 'top':
			return { label: `置顶 - ${e.historyData[0].title}`, icon: 'Layers' };
		case 'bottom':
			return { label: `置底 - ${e.historyData[0].title}`, icon: 'Layers' };
		case 'up':
			return { label: `上移 - ${e.historyData[0].title}`, icon: 'Layers' };
		case 'down':
			return { label: `下移 - ${e.historyData[0].title}`, icon: 'Layers' };
		case 'move':
			return { label: `移动 - ${e.historyData[0].title}`, icon: 'StackedMove' };
		case 'add':
			return { label: `新增 - ${e.historyData[0].title}`, icon: 'Duplicate' };
		case 'group':
			return { label: `成组`, icon: 'Carbon3DCursor' };
		case 'unGroup':
			return { label: `解组`, icon: 'Carbon3DSoftware' };
		case 'lock':
			return { label: `锁定 - ${e.historyData[0].title}`, icon: 'LockClosedOutline' };
		case 'unLock':
			return { label: `解锁 - ${e.historyData[0].title}`, icon: 'LockOpenOutline' };
		case 'hide':
			return { label: `隐藏 - ${e.historyData[0].title}`, icon: 'EyeOffOutline' };
		case 'show':
			return { label: `显示 - ${e.historyData[0].title}`, icon: 'EyeOutline' };
		default:
			return { label: ``, icon: 'Pencil' };
	}
}

const options = computed(() => reverse($store.chart.backStack.map((e) => iconHandle(e)).filter((item) => item.label)));
</script>

<style lang="scss" scoped>
.mr-10 {
	margin-right: 10px;
}
.edit-history-popover {
	.btn-text {
		font-size: 12px;
		margin-right: 3px;
	}
	.history-list-box {
		width: 100%;
		.list-item {
			z-index: 2;
			position: relative;
			cursor: default;
			padding: 2px;
			.item-icon {
				margin-right: 10px;
			}
		}
	}
}
</style>
